<script setup>
	import Dialog from '../Layout/components/Dialog.vue'
	import Push from './components/Push.vue'
	import Help from './components/Help.vue'
	import Domain from './components/Domain.vue'
	import {
		h,
		ref,
		reactive
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'


	const activeTab = ref(0);
	const pushShow = ref(false)

	const form = reactive({
		limit: 0
	})

	const queryForm = reactive({})
	const agree = ref(false)
	const agree1 = ref(false)
	const dialogShow = ref(false)
	const dialogVisible2 = ref(false)
	const helpShow = ref(false)

	const tableData = ref([{
		name: 'dz80.com',
		name_arr: ['zealand.com.cn', 'dz80.com', 'zbb0.cn'],
		receive_id: '17600521247',
		amount: 30,
		time: '2024-11-11 17:06:21',
		status: 0,
		remark: '备注内容'
	}, {
		name: 'zbb0.cn',
		name_arr: [],
		receive_id: '17600521247',
		amount: 50,
		time: '2024-11-11 17:06:21',
		status: 1,
		remark: '备注内容'
	}, {
		name: 'zealand.com.cn',
		name_arr: ['zealand.com.cn', 'dz80.com', 'zbb0.cn', 'zealand.com.cn', 'zealand.com.cn'],
		receive_id: '17600521247',
		amount: 10,
		time: '2024-11-11 17:06:21',
		status: 2,
		remark: ''
	}, {
		name: 'zbb0.cn',
		name_arr: [],
		receive_id: '17600521247',
		amount: 0,
		time: '2024-11-11 17:06:21',
		status: 3,
		remark: ''
	}, {
		name: 'zbb0.cn',
		name_arr: ['zealand.com.cn', 'dz80.com', 'zbb0.cn'],
		receive_id: '17600521247',
		amount: 20,
		time: '2024-11-11 17:06:21',
		status: 4,
		remark: ''
	}, {
		name: 'dz80.com',
		name_arr: ['zealand.com.cn', 'dz80.com', 'zbb0.cn'],
		receive_id: '17600521247',
		amount: 30,
		time: '2024-11-11 17:06:21',
		status: 0,
		remark: '备注内容'
	}, {
		name: 'zbb0.cn',
		name_arr: [],
		receive_id: '17600521247',
		amount: 50,
		time: '2024-11-11 17:06:21',
		status: 1,
		remark: '备注内容'
	}, {
		name: 'zealand.com.cn',
		name_arr: ['zealand.com.cn', 'dz80.com', 'zbb0.cn', 'zealand.com.cn', 'zealand.com.cn'],
		receive_id: '17600521247',
		amount: 10,
		time: '2024-11-11 17:06:21',
		status: 2,
		remark: ''
	}, {
		name: 'zbb0.cn',
		name_arr: [],
		receive_id: '17600521247',
		amount: 0,
		time: '2024-11-11 17:06:21',
		status: 3,
		remark: ''
	}, {
		name: 'zbb0.cn',
		name_arr: ['zealand.com.cn', 'dz80.com', 'zbb0.cn'],
		receive_id: '17600521247',
		amount: 20,
		time: '2024-11-11 17:06:21',
		status: 4,
		remark: ''
	}])

	const tableData3 = ref([{
		name: 'mzlhskj.cn',
		registrar: '190vip'
	}, {
		name: 'lrdspt.cn',
		registrar: 'ename'
	}, {
		name: 'bjfyhtshop.cn',
		registrar: 'xw'
	}, {
		name: '0731s.cn',
		registrar: '190vip'
	}, {
		name: 'zmxuan2.cn',
		registrar: '190vip'
	}])
	const multipleSelection = ref([])
	const currentPage = ref(1)
	const total = ref(1000)
	const domainShow = ref(false)

	const addDomain = () => {
		domainShow.value = true
	}

	const domainSelect = (e) => {
		domainShow.value = false
		if (activeTab.value == 0) {
			form.nameStr = e.join('\n')
		} else {
			form3.nameStr = e.join('\n')
		}
	}

	const openAgree = () => {
		dialogShow.value = true
	}

	const sumbitPush = () => {
		pushShow.value = true
	}


	const activeName = ref('first')
	const getStringLen = (str) => {
		if (str) {
			let arr = str.split('\n')
			return arr.length
		} else {
			return 0
		}
	}

	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const switchTab = (tabId) => {
		activeTab.value = tabId;
	};

	const handleViews = (row) => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			icon: 'WarningFilled',
			message: h('div', null, [
				h('h4', null, '域名PUSH处理中'),
				h('p', {
					style: 'color: #999999;margin-bottom:20px;'
				}, '系统将在24小时内处理完成'),
			]),
			showCancelButton: true,
			cancelButtonClass: 'custom-cancel',
			cancelButtonText: '遇到问题',
			confirmButtonText: '知道了',
			type: 'warning'
		}).then(() => {
			console.log(1)
		}).catch(() => {
			helpShow.value = true
		})
	}

	const handleAccept = (row) => {
		dialogVisible2.value = true
	}

	const handleRefuse = (row) => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			icon: 'WarningFilled',
			message: h('div', null, [
				h('h4', null, '拒绝本次域名PUSH请求'),
				h('span', {
					style: 'color: #F04134'
				}, '拒绝后不可恢复'),
				h('span', {
					style: 'color: #999999'
				}, '，确定拒绝吗？'),
			]),
			showCancelButton: true,
			cancelButtonText: '再想想',
			confirmButtonText: '知道了',
			type: 'error'
		}).then(() => {
			ElMessageBox({
				title: '',
				customClass: 'custom-message',
				message: h('div', null, [
					h('h4', null, '操作成功'),
					h('p', {
						style: 'color: #999999'
					}, '已拒绝本次域名PUSH请求'),
				]),
				showClose: false,
				showCancelButton: false,
				showConfirmButton: false,
				type: 'success'
			})
			setTimeout(() => {
				ElMessageBox.close()
			}, 2000)
		})
	}
</script>
<template>
	<div class="container">
		<div class="page-title bold">域名PUSH</div>
		<div class="bs-panel">
			<el-row class="account-menu-list">
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(0)">
						<img src="../../assets/images/fly.png" alt="">
						<span>域名PUSH</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(1)">
						<img src="../../assets/images/file-fly.png" alt="">
						<span>我发起的PUSH</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(2)">
						<img src="../../assets/images/fly-file.png" alt="">
						<span>我收到的PUSH</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(3)">
						<img src="../../assets/images/file-ask.png" alt="">
						<span>常见问题</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div v-if="activeTab == 0">
			<div class="bs-panel">
				<div class="bs-panel-body">
					<div class="bs-panel_hd" style="margin-bottom: 0;">
						<div class="bs-panel_tt bold">域名PUSH</div>
					</div>
				</div>
				<div class="bs-panel-body" style="padding-top: 0;">
					<el-form :model="form" label-width="116px" label-position="right" size="large">
						<div class="el-form-item">
							<div class="el-form-item__label form-column">
								<div style="margin-left: auto;">要PUSH的域名</div>
								<div class="domain-select">从<el-button link @click="addDomain">我的域名</el-button>选择</div>
							</div>
							<div class="el-form-item__content">
								<div class="wrapdmTextarea textarea-box">
									<div class="textarea-warp" style="z-index: 200; top: 0;">
										<textarea id="textarea" placeholder="多条域名请换行分隔，每次最多批量PUSH100条域名"
											class="ui-input dmTextarea dmTyping" name="domain" style="overflow-y: auto;"
											v-model="form.nameStr"></textarea>
										<div class="textarea-limit">
											{{getStringLen(form.nameStr)}}/100
										</div>
									</div>
								</div>
								<div class="textarea-tip">
									只有未被限制的域名才可以进行PUSH。PUSH前，请及时检查变更域名的ICP备案信息。</div>
							</div>
						</div>
						<el-form-item label="接收方的ID">
							<el-input v-model="form.receive_id" placeholder="请输入对方的190用户ID"
								style="width:230px;margin-right:30px;"></el-input>
							<span class="text-gray">可通过 190管理中心 - 账户管理 - 个人资料 查看用户ID</span>
						</el-form-item>
						<el-form-item label="索要金额">
							<el-input-number v-model="form.amount" controls-position="right" style="width: 120px;" />
							<span class="text-gray" style="margin: 0 30px 0 20px;">元</span>
							<span class="text-error">提现需收取1%手续费</span>
						</el-form-item>
						<el-form-item label="留言备注">
							<el-input v-model="form.remark" maxlength="50" placeholder="请输入留言备注"
								style="width:230px;margin-right:20px;"></el-input>
							<span class="text-gray">仅双方可见，50字以内</span>
						</el-form-item>
						<el-form-item label="限制转移">
							<el-radio-group v-model="form.limit">
								<el-radio :value="0">不限制</el-radio>
								<el-radio :value="1">限制</el-radio>
							</el-radio-group>
							<span class="text-gray" style="margin-left: 30px;">设置限制转移后，对方接收push后的60天内禁止转移注册商</span>
						</el-form-item>
						<div class="form-foot">
							<div class="form-agree">
								<el-checkbox v-model="agree" label="我已同意并阅读" />
								<el-button link class="agree-btn" @click="openAgree">《域名管理系统域名PUSH服务协议》</el-button>
							</div>
							<div class="form-submit">
								<el-button type="warning" @click="sumbitPush">提交PUSH</el-button>
							</div>
						</div>
					</el-form>
				</div>
			</div>
			<div class="bs-panel">
				<div class="bs-panel-body">
					<el-tabs v-model="activeName" class="demo-tabs">
						<el-tab-pane label="PUSH流程" name="first">
							<div class="step">
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">1</div>
									</div>
									<div class="step-item-content">
										<div class="title">发起域名PUSH</div>
										<div class="desc">发起方选择需要PUSH的域名，确认接受方的用户ID和PUSH金额</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">2</div>
									</div>
									<div class="step-item-content">
										<div class="title">通知接受方</div>
										<div class="desc">190会发送通知至接受方，发起方也可自行通知</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">3</div>
									</div>
									<div class="step-item-content" style="width: 160px;">
										<div class="title">接收域名PUSH</div>
										<div class="desc">接受方可通过190控制台页面处理收到的域名PUSH
										</div>
									</div>
								</div>
								<div class="step-line"></div>
								<div class="step-item">
									<div class="step-item-left">
										<div class="num">4</div>
									</div>
									<div class="step-item-content">
										<div class="title">域名PUSH完成</div>
										<div class="desc">接受方付款后，域名自动过户到接受方选择的模板下，域名PUSH完成</div>
									</div>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="PUSH规则" name="second">
							<div class="rule-box">
								<div class="title">域名带价PUSH需要遵循以下规则</div>
								<ul>
									<li>域名带价Push提交成功，有效时间为7天（7*24小时），7天内接受方未接收的带价Push域名将失效。</li>
									<li>在接受方接收带价Push域名前，发起方可以取消已提交的带价Push域名。</li>
									<li>接受方处理接收PUSH域名并成功支付后，不支持退款和退回域名。</li>
									<li>若有任何疑问，请联系域名专员协助解决：联系电话: 0755-2955 6666 邮箱: kf@190.vip
									</li>
								</ul>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
			<Dialog :dialogShow="dialogShow" title="域名管理系统域名PUSH服务协议" content="" />
		</div>
		<div v-if="activeTab == 1">
			<div class="bs-panel table-box">
				<div class="bs-panel-body">
					<div class="table-tool">
						<div class="tool-left">
							<span class="selected">
								搜索结果共{{total}}条
							</span>
						</div>
						<div class="tool-right">
							<el-input v-model="queryForm.search" style="width: 240px" placeholder="输入关键词查询" clearable
								prefix-icon="Search"></el-input>
						</div>
					</div>
					<el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
						<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
						<el-table-column prop="name" label="域名" width="200">
							<template #default="scope">
								{{scope.row.name}}<span v-if="scope.row.name_arr.length > 0">等<el-popover
										placement="top-start" :width="200" trigger="hover">
										<p v-for="(item,index) in scope.row.name_arr" :key="index">
											{{item}}
										</p>
										<template #reference>
											<el-button link class="domain-num">{{scope.row.name_arr.length}}</el-button>
										</template>
									</el-popover>个域名</span>
							</template>
						</el-table-column>
						<el-table-column prop="receive_id" label="接收方用户ID"></el-table-column>
						<el-table-column prop="amount" label="索要金额（元）" align="center">
							<template #default="scope">￥{{scope.row.amount}}</template>
						</el-table-column>
						<el-table-column prop="time" label="发起时间" align="center" width="200">
						</el-table-column>
						<el-table-column prop="status" width="130">
							<template #header>
								<el-select v-model="form.status" placeholder="状态" style="width: 100px">
									<el-option label="待接收" :value="0"></el-option>
									<el-option label="PUSH中" :value="1"></el-option>
									<el-option label="已接收" :value="2"></el-option>
									<el-option label="被拒绝" :value="3"></el-option>
									<el-option label="已关闭" :value="4"></el-option>
								</el-select>
							</template>
							<template #default="scope">
								<span v-if="scope.row.status == 0" class="td-error">待接收</span>
								<span v-if="scope.row.status == 1" class="td-purple">PUSH中</span>
								<span v-if="scope.row.status == 2" class="td-success">已接收</span>
								<span v-if="scope.row.status == 3" class="td-gray">被拒绝</span>
								<span v-if="scope.row.status == 4" class="td-gray">已关闭</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template #default="scope">
								<div class="operate-btns">
									<el-button link v-if="scope.row.status == 0"
										@click="handelCancel(scope.row)">取消</el-button>
									<span v-else>-</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="留言备注" align="center">
						</el-table-column>
					</el-table>
					<div class="pager-box">
						<span></span>
						<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
							:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		<div v-if="activeTab == 2">
			<div class="bs-panel table-box">
				<div class="bs-panel-body">
					<div class="table-tool">
						<div class="tool-left">
							<span class="selected">
								搜索结果共{{total}}条
							</span>
						</div>
						<div class="tool-right">
							<el-input v-model="queryForm.search" style="width: 240px" placeholder="输入关键词查询" clearable
								prefix-icon="Search"></el-input>
						</div>
					</div>
					<el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
						<el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
						<el-table-column prop="name" label="域名" width="200">
							<template #default="scope">
								{{scope.row.name}}<span v-if="scope.row.name_arr.length > 0">等<el-popover
										placement="top-start" :width="200" trigger="hover">
										<p v-for="(item,index) in scope.row.name_arr" :key="index">
											{{item}}
										</p>
										<template #reference>
											<el-button link class="domain-num">{{scope.row.name_arr.length}}</el-button>
										</template>
									</el-popover>个域名</span>
							</template>
						</el-table-column>
						<el-table-column prop="receive_id" label="发起方用户ID"></el-table-column>
						<el-table-column prop="amount" label="索要金额（元）" align="center">
							<template #default="scope">￥{{scope.row.amount}}</template>
						</el-table-column>
						<el-table-column prop="time" label="发起时间" align="center" width="200">
						</el-table-column>
						<el-table-column prop="status" width="130">
							<template #header>
								<el-select v-model="form.status" placeholder="状态" style="width: 100px">
									<el-option label="待接收" :value="0"></el-option>
									<el-option label="PUSH中" :value="1"></el-option>
									<el-option label="已接收" :value="2"></el-option>
									<el-option label="被拒绝" :value="3"></el-option>
									<el-option label="已关闭" :value="4"></el-option>
								</el-select>
							</template>
							<template #default="scope">
								<span v-if="scope.row.status == 0" class="td-error">待接收</span>
								<span v-if="scope.row.status == 1" class="td-purple">PUSH中</span>
								<span v-if="scope.row.status == 2" class="td-success">已接收</span>
								<span v-if="scope.row.status == 3" class="td-gray">被拒绝</span>
								<span v-if="scope.row.status == 4" class="td-gray">已关闭</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template #default="scope">
								<div class="operate-btns" v-if="scope.row.status == 1">
									<el-button link @click="handleViews(scope.row)">查看</el-button>
								</div>
								<div class="operate-btns" v-else-if="scope.row.status == 0">
									<el-button link @click="handleAccept(scope.row)">接受</el-button><el-button link
										@click="handleRefuse(scope.row)">拒绝</el-button>
								</div>
								<div v-else>-</div>
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="留言备注" align="center">
						</el-table-column>
					</el-table>
					<div class="pager-box">
						<span></span>
						<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
							:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		<div v-if="activeTab == 3">
			<div class="bs-panel table-box">
				<div class="bs-panel-body">
					<div class="faq">
						<h4>常见问题FAQ</h4>
						<p>1、 什么是域名带价push？</p>
						<p>域名带价 push
							是190提供的一种域名交易方式。在这种交易中，卖家（发起方）将域名转让给指定的买家（接收方），并明确填写转让价格。当买家成功接收域名并支付转让金额后，域名将完成转让，金额也会即时转给卖家，从而实现点对点的域名交易闭环。这种方式简化了交易流程，使买卖双方更高效地完成交易。
						</p>
						<p>2、 域名带价push交易需要手续费吗？</p>
						<p>为了让用户享受更便捷的交易体验，目前带价 push 交易是不需要手续费的。不过请注意，在进行提现时，我们会收取 1% 的手续费。感谢您的理解与支持！

						</p>
						<p>3、 域名带价push交易可以开具发票吗？</p>
						<p>目前，域名带价 push 交易不支持开具交易发票。我们仅能提供提现手续费的发票。</p>
						<p>4、 域名带价push成功后，是否可以退款或退回域名？</p>
						<p>不可以。一旦域名完成购买交易，域名将无法退还给卖家，交易款项也无法退回。请在交易前仔细确认信息，以确保您的决策是最终确定的。</p>
						<p>5、如何进行付款？</p>
						<p>* 卖家索要金额为0元，买家在接收后直接进行域名的 PUSH，无需付款。</p>
						<p>* 如果卖家索要金额大于0元，买家在接收 PUSH
							时可以选择通过微信、支付宝等在线支付；也可通过账户余额进行付款。如果账户（可用）余额不足，买家需要先充值金额到账户。

						</p>
						<p>6、 如何进行收款？</p>
						<p>买家支付并接收域名 PUSH 后，金额会即时转到卖家的190账户余额中。卖家可以在190用户管理中心自行提现。请注意，提现时会收取一定的手续费。</p>
						<p>免责声明</p>
						<p>190平台不对域名交易的结果负责，所有交易均由买卖双方自行协商并承担风险。请在交易前仔细核实相关信息，确保交易安全。如有任何疑问，请及时联系我们的客服团队。
						</p>
					</div>
					<div class="contacts text-right">
						<p>联系电话: 0755-2955 6666</p>
						<p>邮箱: kf@190.vip</p>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogVisible2" width="850">
			<template #header>
				<div class="dialog-header">
					<span class="dialog-title">接收PUSH</span>
				</div>
			</template>
			<div class="top-notice">
				<el-alert title="温馨提示：对方设置了禁止转移，即在接收PUSH后60天内您将无法将域名转出190。" type="warning" show-icon></el-alert>
			</div>
			<div class="push-tip">
				<p>对方本次发起的PUSH包含<span class="error">12条</span>域名，索要金额<span class="error"> ¥ 20 元 </span>。</p>
				<p>留言备注：这是给你用的域名，记得及时接收！放在你自己的模板下！</p>
			</div>
			<div class="domains-table table-box">
				<el-table :data="tableData3" height="285" style="width: 100%" show-overflow-tooltip>
					<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
					<el-table-column prop="name" label="域名">
					</el-table-column>
					<el-table-column prop="template" label="域名">
						<template #header>
							<el-select v-model="form.status" placeholder="选择模版" clearable style="width: 200px">
								<el-option label="模版一" :value="1"></el-option>
								<el-option label="模版二" :value="2"></el-option>
								<el-option label="模版三" :value="3"></el-option>
							</el-select>
						</template>
						<template #default="scope">
							<div class="table-input">
								<el-select v-model="scope.row.template" placeholder="选择模版" clearable
									style="width: 200px">
									<el-option label="模版一" :value="1"></el-option>
									<el-option label="模版二" :value="2"></el-option>
									<el-option label="未设置模版" :value="3"></el-option>
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="域名备注">
						<template #default="scope">
							<div class="table-input">
								<el-input v-model="scope.row.remark" placeholder="请输入备注" maxlength="20"></el-input>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<div style="padding-top: 20px;">本次PUSH将在 2024-11-22 08:55:46 过期，此前对方也可随时取消本次域名PUSH。</div>
			</div>
			<div class="form-footer">
				<div class="form-agree">
					<el-checkbox v-model="agree1" label="我已同意并阅读" />
					<el-button link class="agree-btn" @click="openAgree">《域名管理系统域名push服务协议》</el-button>
				</div>
				<div class="form-btns">
					<el-button type="warning" @click="dialogVisible2 = false" size="large">
						支付并接收
					</el-button>
					<el-button @click="dialogVisible2 = false" class="btn-default" size="large">返 回</el-button>
				</div>
			</div>
		</el-dialog>
		<Domain v-model:show="domainShow" @submit="domainSelect"></Domain>
		<Push v-model:show="pushShow"></Push>
		<Help v-model:show="helpShow"></Help>
	</div>
</template>
<style scoped lang="scss">
	.form-foot {
		padding-left: 116px;
		border-top: 1px solid #d3d7dc;
		padding-top: 20px;
	}

	.form-agree {
		display: flex;
		align-items: center;
		margin-bottom: 15px;

		.agree-btn {
			padding: 8px 2px;
		}

		.agree-btn:hover {
			color: #F68A0C;
			text-decoration: underline;
		}
	}

	.step {
		display: flex;
		margin-top: 30px;

		.step-item {
			display: flex;

			.step-item-left {
				width: 30px;
				margin-right: 10px;

				.num {
					width: 30px;
					height: 30px;
					border: 1px solid #F68A0C;
					border-radius: 30px;
					color: #F68A0C;
					text-align: center;
					line-height: 30px;
				}
			}

			.step-item-content {
				width: 130px;

				.title {
					font-size: 14px;
					color: #F68A0C;
					text-align: center;
					line-height: 30px;
				}

				.desc {
					font-size: 12px;
					color: #666;
					text-align: center;
					width: 130px;
				}
			}
		}

		.step-line {
			width: 150px;
			height: 1px;
			background-color: #F68A0C;
			margin-top: 14px;
			margin-right: 20px;
		}
	}

	.rule-box {
		.title {
			font-size: 17px;
			font-weight: 700;
			margin-bottom: 16px;
			padding-left: 22px;
		}

		li {
			margin-bottom: 16px;


			&::before {
				content: '●';
				font-size: 12px;
				margin-right: 16px;
			}
		}
	}

	.textarea-box {
		width: 100%;
		height: 102px;
	}

	.textarea-limit {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.dmTextarea.dmTyping {
		height: 100px;
	}

	.textarea-tip {
		color: #999;
		margin-top: 10px;
	}

	.form-column {
		flex-direction: column;
		justify-content: flex-start;
	}

	.domain-select .el-button {
		vertical-align: baseline;
		color: rgb(0, 0, 255) !important;
	}

	.domain-select .el-button:hover {
		text-decoration: underline;
	}

	.form-submit .el-button {
		width: 140px;
	}

	.domain-num {
		vertical-align: baseline;
		color: rgb(0, 0, 255);
	}


	.domains-table {
		.table-tool {
			padding-bottom: 10px;
		}
	}

	.faq {
		padding-bottom: 20px;

		h4 {
			margin-bottom: 24px;
			font-size: 16px;
		}

		p {
			margin-bottom: 24px;
		}
	}

	.push-tip {
		margin-bottom: 20px;
	}

	.form-footer {
		text-align: center;
		padding: 10px 0;

		.form-agree {
			justify-content: center;
		}

		.form-btns {
			.el-button {
				width: 140px;
			}
		}
	}

	.table-input {
		padding: 1px 0;

		::v-deep .el-select__wrapper {
			box-shadow: unset;
			background-color: transparent;
		}

		::v-deep .el-input__wrapper {
			box-shadow: unset;
			background-color: transparent;
		}
	}
</style>